<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 09:43:46
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-11-23 15:36:23
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractBaseInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 合同基础设置 -->
<template>
  <div class="step3">
    <div class="left" :style="'height:' + (paper.a4.height - 40) + 'px'">
      <div class="title">选择人员</div>
      <div class="left-body">
        <a-button v-for="item in userList" :key="item.id" size="mini" class="butss" :status="choiceUserId === item.id ? 'success' : 'normal'" shape="round" @click="choiceUserId = item.id">
          {{ item.name }}
        </a-button>
      </div>
      <div class="title">合同与附件</div>
      <div class="left-body">
        <a-button v-for="item in templateList" :key="item.uuid" size="mini" class="butss" :status="choiceTemId === item.uuid ? 'success' : 'normal'" shape="round" @click="choiceTemId = item.uuid">
          {{ item.name }}
        </a-button>
      </div>
    </div>
    <a-spin :loading="loading" tip="加载中">
      <FilePreview ref="previewFileRef" :style="
          'width:' +
          (paper.a4.width - 40) +
          'px;padding:20px;min-height:' +
          (paper.a4.height - 40) +
          'px'
        " class="body" v-if="fileShow" :file="previewFile.fileMessage">
      </FilePreview>
      <div v-if="!fileShow" :style="
          'width:' +
          (paper.a4.width - 40) +
          'px;padding:20px;min-height:' +
          (paper.a4.height - 40) +
          'px'
        " class="body" v-html="text" />
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { paper } from '@/utils/printAndPdf';
import { SwitchDraftWaitSignedContract } from '@/apis/management/contract/contractManagement/waitSigned';
import FilePreview from './FilePreview.vue';

let props = withDefaults(
  defineProps<{
    userList: any[];
    templateList: any[];
    templateObj: any;
  }>(),
  {}
);
watch(
  () => props.templateList,
  (val) => {
    console.log('props.templateList', val);
    if (val.length) choiceTemId.value = val[0].uuid;
    loadPreview();
  }
);
watch(
  () => props.userList,
  (val) => {
    if (val.length) choiceUserId.value = val[0].id;
    loadPreview();
  }
);
let loading = ref(false);
let text = ref('');
// 刷新组件
const fileShow = ref(false);
let previewFile = reactive({
  fileShow: false,
  fileMessage: {
    id: '',
    fileName: '',
    downloadUrl: ''
  }
});
const PreviewModelVisible = ref(false);

// let
let loadPreview = async () => {
  loading.value = true;
  text.value = '';
  previewFile = {
    fileShow: false,
    fileMessage: {
      id: '',
      fileName: '',
      downloadUrl: ''
    }
  };
  if (!choiceTemId.value || !choiceUserId.value) return {};
  let templateData =
    props.templateObj[choiceUserId.value + '-' + choiceTemId.value];
  console.log('点击', templateData);
  if (!templateData.codes) {
    previewFile.fileMessage.id = templateData.fileId;
    previewFile.fileMessage.fileName = templateData.fileName;
    previewFile.fileMessage.downloadUrl = templateData.fileUrl;
    previewFile.fileShow = true;
    fileShow.value = true;
  } else {
    fileShow.value = false;
    previewFile.fileShow = false;
    let res = await SwitchDraftWaitSignedContract({
      id: templateData.userInfo?.id,
      text: templateData.text,
      codes: templateData.codes
    });
    text.value = res;
  }
  loading.value = false;
};
let choiceTemId = ref('');
let choiceUserId = ref(0);

watch(choiceTemId, (val) => loadPreview());
watch(choiceUserId, (val) => loadPreview());
let richTextTemplateValue = computed(() => {
  if (!choiceTemId.value || !choiceUserId.value) return {};
  return props.templateObj[choiceUserId.value + '-' + choiceTemId.value];
});
</script>

<style lang="less" scoped>
.step3 {
  display: flex;
  justify-content: center;
  .left {
    margin-right: 20px;
    width: 220px;
    .title {
      font-weight: 600;
      font-size: 16px;
    }

    &-body {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    border: 1px solid var(--color-neutral-4);
    padding: 20px;
  }
  .butss {
    margin: 5px;
  }
  .body {
    word-wrap: break-word;
    margin-bottom: 70px;
    box-shadow: 0px 0px 5px var(--color-neutral-6);
    // transform: scale(1.4);
  }
}
</style>
